<template>
  <div class="key-bg">
    <shooting-star />
    <blink-star />
    <div class="key-character"></div>
    <div class="key-star"></div>
    <div class="key-text">
      <div class="key-title"></div>
      <div id="J-template1" class="key-container">
        <canvas id="J-template1-canvas">

        </canvas>
      </div>
      <div
        v-if="!isKeyWordShow"
        class="key-btn"
        @click="grenateWorldCoud"
      ></div>
    </div>
    <arrows-icon v-if="isKeyWordShow" />
  </div>
</template>

<script>
const shapeUrl = `${process.env.PUBLIC_PATH}/static/images/timetravel/5.png`
import WordCloud from 'wordcloud'
let maskCanvasEl = null
export default {
  props: {
    keywordslist: {
      type: Array,
      default: []
    }
  },
  emits: ['key-word-showed'],
  data () {
    return {
      isKeyWordShow: false
    }
  },
  mounted(){
    const template1El = document.getElementById('J-template1')
    maskCanvasEl = document.getElementById('J-template1-canvas')
    maskCanvasEl.width = template1El.clientWidth
    maskCanvasEl.height = template1El.clientHeight
  },

  methods: {
    grenateWorldCoud () {
      this.$emit('key-word-showed')
      this.isKeyWordShow = true
      this.createMaskCanvas().then(maskCanvasScaled => {
        this.doGrenate(maskCanvasScaled)
      })
    },

    createMaskCanvas(){
      return new Promise(resolve => {
        const img = document.createElement('img')
        img.crossOrigin = 'Anonymous'
        img.onload = () => {
          const maskCanvas = document.createElement('canvas')
          maskCanvas.width = img.width
          maskCanvas.height = img.height
          const ctx = maskCanvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)

          const imageData = ctx.getImageData(0,0, maskCanvas.width, maskCanvas.height)
          const newImageData = ctx.createImageData(imageData)
          for (let i = 0; i < imageData.data.length; i += 4) {
            const tone = imageData.data[i] +
                imageData.data[i + 1] +
                imageData.data[i + 2]
            const alpha = imageData.data[i + 3]

            if (alpha < 128 || tone > 128 * 3) {
            // Area not to draw
              newImageData.data[i] =
                    newImageData.data[i + 1] =
                        newImageData.data[i + 2] = 255
              newImageData.data[i + 3] = 0
            } else {
            // Area to draw
              newImageData.data[i] =
                    newImageData.data[i + 1] =
                        newImageData.data[i + 2] = 0
              newImageData.data[i + 3] = 255
            }
          }
          ctx.putImageData(newImageData, 0, 0)

          const bctx = window.document.createElement('canvas').getContext('2d')
          bctx.fillStyle = 'transparent'
          bctx.fillRect(0, 0, 1, 1)
          const bgPixel = bctx.getImageData(0, 0, 1, 1).data

          const maskCanvasScaled = window.document.createElement('canvas')
          maskCanvasScaled.width = maskCanvasEl.width
          maskCanvasScaled.height = maskCanvasEl.height
          const scaledCtx = maskCanvasScaled.getContext('2d')

          scaledCtx.drawImage(maskCanvas,
            0, 0, maskCanvas.width, maskCanvas.height,
            0, 0, maskCanvasScaled.width, maskCanvasScaled.height)

          const scaledCtxImageData = scaledCtx.getImageData(0, 0, maskCanvasScaled.width, maskCanvasScaled.height)
          const scaledCtxNewImageData = scaledCtx.createImageData(scaledCtxImageData)
          for (let i = 0; i < scaledCtxImageData.data.length; i += 4) {
            if (scaledCtxImageData.data[i + 3] > 128) {
              scaledCtxNewImageData.data[i] = bgPixel[0]
              scaledCtxNewImageData.data[i + 1] = bgPixel[1]
              scaledCtxNewImageData.data[i + 2] = bgPixel[2]
              scaledCtxNewImageData.data[i + 3] = bgPixel[3]
            } else {
              // This color must not be the same w/ the bgPixel.
              scaledCtxNewImageData.data[i] = bgPixel[0]
              scaledCtxNewImageData.data[i + 1] = bgPixel[1]
              scaledCtxNewImageData.data[i + 2] = bgPixel[2]
              scaledCtxNewImageData.data[i + 3] = bgPixel[3] ? (bgPixel[3] - 1) : 1
            }
          }
          scaledCtx.putImageData(scaledCtxNewImageData, 0, 0)
          resolve(maskCanvasScaled)
        }
        img.src = shapeUrl
      })
    },
    doGrenate(maskCanvasScaled){
      const allList = this.keywordslist.concat(this.keywordslist)
      const level1FontSize = 30
      const level2FontSize = 20
      const level3FontSize = 14
      const wordList = allList.map((item, index) => {
        let size = 6,

        if(index < 3){
          size = level1FontSize
        }
        if (index >= 3) {
          size = level2FontSize
        }
        if (index >= 6) {
          size = level3FontSize
        }
        if (index >= 35) {
          size = 6
        }
        return [item, size]
      })
      const ctx = maskCanvasEl.getContext('2d')
      ctx.clearRect(0, 0, maskCanvasEl.width, maskCanvasEl.height)
      ctx.drawImage(maskCanvasScaled, 0,0)
      WordCloud(maskCanvasEl,{
        list: wordList,
        gridSize: 5,
        drawOutOfBound: false,
        fontFamily: 'Futur',
        weightFactor: 1,
        color: function (word, weight) {
          let color = ''
          switch(weight){
            case level1FontSize:
              const colors = ['#ffc811', '#ffffff']
              const index = Math.floor(Math.random() * 2)
              color = colors[index]
              break
            case level2FontSize:
              color = '#fc732c'
              break
            case level3FontSize:
              const level3Colors = ['#ffb47c', '#ffffff']
              const level3Index = Math.floor(Math.random() * 2)
              color = level3Colors[level3Index]
              break
            case 6:
              color = '#cdcce7'
              break
          }
          return color
        },
        clearCanvas: false,
        backgroundColor: 'transparent',
        maxRotation: 0
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.key-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./images/E_bg.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.key-character {
  position: absolute;
  top: 10%;
  left: 0;
  width: 2.31rem;
  height: 1.75rem;
  background-image: url("./images/E_character.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: character 4s infinite;
  @keyframes character {
    50% {
      top: 7%;
    }
    100% {
      top: 10%;
    }
  }
}
.key-star {
  position: absolute;
  top: 17.54%;
  right: 0;
  width: 1.26rem;
  height: 1.96rem;
  background-image: url("./images/E_star.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star 6s infinite;
  @keyframes star {
    50% {
      top: 20.54%;
    }
    100% {
      top: 17.54%;
    }
  }
}
.key-smallstar {
  position: absolute;
  top: 6.3%;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url("./images/E_smallstar.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  animation: smallstart 3s infinite;
  @keyframes smallstart {
    0%,
    100% {
      transform: scale(0.95);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }
}
.key-text {
  position: relative;
  right: 0;
  width: 100%;
  height: 8.56rem;
  padding: 0 1.03rem 0 1.32rem;
  .key-title {
    width: 3.95rem;
    height: 0.52rem;
    background-image: url("./images/E_title.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-left: 13%;
  }
  .key-container {
    width: 100%;
    height: 7.52rem;
    margin-top: 5%;
    background-image: url("./images/E_container.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    .key-textcontainer {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
  .key-btn {
    width: 3.96rem;
    height: 0.9rem;
    margin: 0 auto;
    margin-top: 0.21rem;
    background-image: url("./images/E_btn.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
}
</style>
